// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
// applied to the overlay box.
- &, &:drop(active) { border-style: none; } // FIXME: implement a proper drop(active) state
+ &:drop(active), & { border-style: none; } // FIXME: implement a proper drop(active) state
$_colorswatch_radius: 5px;
- $_colorswatch_overlay_shadow: if($variant == 'light', inset 0 2px 2px -3px transparentize(black, 0.3),
- inset 0 3px 2px -2px transparentize(black, 0.5));
// base color corners rounding
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
}
overlay {
- box-shadow: $_colorswatch_overlay_shadow;
border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
- &:hover { box-shadow: inset 0 1px transparentize(white, 0.7); }
+ &:hover {
+ box-shadow: inset 0 1px transparentize(white, 0.6),
+ inset 0 -1px transparentize(black, 0.8);
+ }
&:backdrop, &:backdrop:hover {
border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color);
/*****************
* Color Chooser *
*****************/
-colorswatch, colorswatch:drop(active) {
+colorswatch:drop(active), colorswatch {
border-style: none; }
colorswatch.top {
border-top-left-radius: 5.5px;
border-color: #4e9a06;
box-shadow: inset 0 0 0 2px #212424, inset 0 0 0 1px #4e9a06; }
colorswatch overlay {
- box-shadow: inset 0 3px 2px -2px rgba(0, 0, 0, 0.5);
border: 1px solid #212424; }
colorswatch overlay:hover {
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); }
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.2); }
colorswatch overlay:backdrop, colorswatch overlay:backdrop:hover {
border-color: #212424;
box-shadow: none; }
/*****************
* Color Chooser *
*****************/
-colorswatch, colorswatch:drop(active) {
+colorswatch:drop(active), colorswatch {
border-style: none; }
colorswatch.top {
border-top-left-radius: 5.5px;
border-color: #4e9a06;
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #4e9a06; }
colorswatch overlay {
- box-shadow: inset 0 2px 2px -3px rgba(0, 0, 0, 0.7);
border: 1px solid rgba(0, 0, 0, 0.3); }
colorswatch overlay:hover {
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); }
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.2); }
colorswatch overlay:backdrop, colorswatch overlay:backdrop:hover {
border-color: rgba(0, 0, 0, 0.3);
box-shadow: none; }